<template>
	<div class="duanxin">
		
		<el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
			<el-form-item label="发送方式" prop="desc">
				<el-button @click="dialogTableVisible = true">选取</el-button>
			</el-form-item>
			<el-form-item label="选取人群" prop="desc">
				<el-tag
				  :key="tag"
				  v-for="tag in ownerNameList">
				  {{tag}}
				</el-tag>
			</el-form-item>
			<el-form-item label="短信类型" prop="desc">
				<el-button type="primary" @click="tongzhi">通知公告</el-button>
				<el-button type="primary" @click="cuicu">催促缴费</el-button>
			</el-form-item>
			
			<el-form-item label="短信内容" prop="desc">
				<el-input class="neirong" type="textarea" v-model="form.letterInfo"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="postLetter">发送短信</el-button>
				<el-button>返回</el-button>
			</el-form-item>
		</el-form>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="500" >
			 <el-table
			    ref="multipleTable"
			    :data="tableData"
			    tooltip-effect="dark"
			    style="width: 500"
				highlight-current-row
			    @current-change="handleSelectionChange1">
			    <!-- <el-table-column
			      type="selection"
			      width="55">
			    </el-table-column> -->
			 
			    <el-table-column v-if="dd==0" prop="jiaofei" label="费用收缴" width="400"> </el-table-column>
				<el-table-column v-if="dd==1" prop="tz" label="通知公告" width="400"> </el-table-column>
				
			 
			  </el-table>
			  <div style="margin-top: 20px">
			    <el-button @click="queque()" >确定</el-button>
			    <el-button @click="toggleSelection1()">取消选择</el-button>
			  </div>
			
			
		 
		</el-dialog>
		<el-dialog class="duihua" title="选取人群" :visible.sync="dialogTableVisible">
			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="小区" prop="communityId">
					<el-select v-model="queryWbu.communityId" placeholder="请选择小区" @keyup.enter.native="sousuo">
						<el-option v-for="item in communityList" :key="item.communityId" :label="item.communityName"
							:value="item.communityId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="楼座" prop="balconyId">
					<el-select v-model="queryWbu.balconyId" placeholder="请选择楼座" @keyup.enter.native="sousuo">
						<el-option v-for="item in balconyList" :key="item.balconyId" :label="item.balconyName"
							:value="item.balconyId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单元" prop="unitId">
					<el-select v-model="queryWbu.unitId" placeholder="请选择单元" @keyup.enter.native="sousuo">
						<el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="sousuo">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="multipleTable" :data="homeList" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column v-if="true" property="owner.ownerId" label="编号" width="150"></el-table-column>
				<el-table-column property="homeNumber" label="房间号" width="150"></el-table-column>
				<el-table-column property="owner.ownerName" label="业主" width="150"></el-table-column>
					
				
				<el-table-column property="wyCostMake.makeContent" label="费用类型" width="150"></el-table-column>
				<el-table-column property="wyCostMake.makeTotal" label="费用" width="300"></el-table-column>
				
			</el-table>
			<div class="qbqx"><el-button @click="toggleSelection()">全部取消</el-button></div>

			<el-button class="baocun" @click="baocun()" type="primary">保存使用</el-button>
			<el-button class="qvxiao" @click="qvxiao()">取消</el-button>

		</el-dialog>

	</div>
</template>
<script>
	import{
		getHomeList,
		getPostLetter
	} from "@/api/letter/methods";
	import {
		getUserProfile
	} from "@/api/system/user";
	import {
		getCommunity,
		getBalconyUnitHome
	} from "@/api/charge/allocation";
	export default {
		data() {
			return {
				// 显示搜索条件
				 tableData: [{  
				          jiaofei: '根据小区业主委员会决定，为了更好地维护小区的供水设施以及其他公共设施的正常运行，确保小区环境的卫生和安全，特向各位业主发出水电费缴纳的通知，具体通知如下： 自本通知发出之日起，业主需在30天内完成水电费的缴纳。 逾期未缴纳的，每天需加收1%的滞纳金。 缴费通知关于水电费缴纳的通知-3、如有疑问或需要协助缴费的业主，可以联系小区物业服务中心，我们将竭力为您解决问题',
						  tz:'近日受寒潮天气的影响,将会出现气温下降及雨雪天气，请及时添加衣物，请你及时添加衣物，防寒保暖，外出时注意出行安全'
						  
				        },
						{
						jiaofei: '本小区每季度需要对业主进行水费结算。 现通知如下： 本次水费结算时间为2021年第三季度，即2021年7月1日至2021年9月30日。 收费时间为2021年10月1日至2021年10月15日。 本小区水费收费标准为每吨水费用为3元。 按照业主实际用水量进行结算，每户最低收费为30元。 3.请业主在收费时间内缴纳水费，逾期将会产生滞纳金。 4.如有任何疑问，请及时联系物业管理处',
						tz:'在高温天气下，容易发生火灾等安全隐患， 业主们做好高温天气的防护措施，共同维护小区的和谐安全。 1.注意中暑症状。 在高温天气下，业主们要及时了解中暑的症状，如头晕、恶心、呕吐、乏力等，一旦出现中暑症状要及时就医。 2.合适的时间通风。,'
						},
						{
						 jiaofei: '尊敬的业主:感谢您入住小区，也感谢您一直以来对物业公司的支持与理解！我们将根据您的合理意见和建议不断完善服务工作，为您提供更加优质的服务。为实现物业经营和管理的良性运作,以保障物业服务工作的有效性和连续性,请您尽快到物业服务中心财务室缴纳2022年度的物业费。',
						 tz:'尊敬的各位业主:根据市气象台今天的天气预报，今天全市阴有阵雨或雷雨，雨量大到暴雨，局部大暴雨。物业管理服务中心特别提醒您：1、请您及时关好门窗，以防大雨打进室内。2、请您出门带好雨具。3、雨天路滑，请您走路小心。4、车辆可停地下车库，请您随手关窗锁门带好贵重物品5、下班后，请您注意断开电源，锁好门窗。如遇困难或特殊紧急情况，请您及时联系物业管理服务中心。'
						},
						{
						jiaofei: '尊敬的居民供热用户： 为全面做好供热前的准备工作，确保按时达标供热，。现将今冬供热收费有关事项通知如下： 一、交费时间：即日起，逾期不再受理。 二、交费标准：30元/平方米使用面积(使用面积=建筑面积75%)。 三、交费地点：所在区域的供水供热服务站。',
						tz:' 近期会有大风降临,业主请在大风强降雨期间合理安排出行，准备好必要生活物资，高层业主关闭窗户、撤回窗外悬挂物和摆放物（如家庭绿植）等物品，最大限度减少隐患。 三、全面落实防御措施。 加强排水设备的管理，检查排水泵能否正常启用，抓紧排除发现的问题。'
						 },
						{
						jiaofei: '根据我们小区的相关规定，现通知您停车位管理费的收缴事项。 为了维持小区的正常运营和提供良好的停车环境，我们需要收取停车位管理费以维护停车设施和进行日常维修。  请您按时缴纳停车位管理费，以免影响您的停车权益。 停车位管理费的收费时间为每月1日至30日。 您可通过以下方式进行缴费： 1.现金支付：请将应缴费用准备好，前往物业办公室进行现金缴纳',
						tz:'近期有雾霾降临:1.加强环境监测：小区物业将加强对空气质量的监测工作，做好霾天气的监控和预警工作，及时通知居民有关防霾知识和注意事项。 2.做好室内空气清洁工作：小区物业将增加室内环境的清洁工作，确保小区内部的室内空气相对清新。 3.提供防霾用品：为了方便居民应对霾天气，小区物业将为每户居民提供一些防霾用品，如口罩、空气净化器等。'
						},],
				ownerNameList:[],
				
				showSearch: true,
				form: {
					letterInfo: '',
					ownerList: []
				},
				queryParams:{
					homeIds:[]
				},
	
				// 小区列表数据
				communityList: [],
				// 楼座列表数据
				balconyList: [],
				// 单元列表数据
				unitList: [],
				// 房间列表数据
				homeList: [],
				queryWbu: {
					communityId: null,
					balconyId: null,
					unitId: null,
					homeId: null
				},
				
				multipleSelection: [],
				multipleSelection1: [],
				dialogTableVisible: false,
				dialogVisible:false,
				dd:0

			};
		},
		created() {
			this.getCommunityList();
			
		},
		methods: {
			queque(){
					if(this.multipleSelection1){
						if(this.dd==0){this.form.letterInfo=this.multipleSelection1.jiaofei;}
						if(this.dd==1){this.form.letterInfo=this.multipleSelection1.tz;}
						
					}
					this.$refs.multipleTable.clearSelection();
					this.dialogVisible = false
			},
			cuicu(){
				this.dd=0;
				this.dialogVisible=true;
				
			},
			tongzhi(){
				this.dd=1;
				this.dialogVisible=true;
				
				
			},
			
			postLetter(){
				getPostLetter(this.form)
				this.form={
					letterInfo: '',
					ownerList: []
				}
			},
			qvxiao(){
				this.toggleSelection();
				this.resetQuery();
				this.dialogTableVisible=false
			},
			baocun(){
				this.dialogTableVisible=false
				console.log(this.form.ownerList);
				console.log(this.ownerNameList)
			
			},

			
			sousuo(){
				getHomeList(this.queryParams.homeIds).then(res=>{
					this.homeList=res.rows
					
				})
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryWbu = {
					communityId: null,
					balconyId: null,
					unitId: null,
					homeId: null
				};
				this.sousuo();
			},
			 toggleSelection1(rows) {
			        if (rows) {
			          rows.forEach(row => {
			            this.$refs.multipleTable.toggleRowSelection(row);
			          });
			        } else {
			          this.$refs.multipleTable.clearSelection();
			        }
			      },
			      handleSelectionChange1(val) {
			        this.multipleSelection1 = val;
			      },
			  

			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				let m1=[];
				let m2=[];
				val.forEach(v=>{
					m1.push(v.owner.ownerId)
					m2.push(v.owner.ownerName)
				})
				this.form.ownerList=m1;
				this.ownerNameList=m2;
				
			},
			/* 获取小区列表 */
			getCommunityList() {
				getCommunity().then(res => {
					this.communityList = res.data
				})
			},

		},
		watch: {
			'queryWbu.communityId': {
				handler() {
		
					this.balconyList = []
					this.unitList = []
					this.homeList = []
					this.queryWbu.balconyId = null
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null
		

					getBalconyUnitHome(this.queryWbu).then(res => {
						this.balconyList = res.data[0]
						
					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.balconyId': {
				handler() {
		
		
					this.unitList = []
					this.homeList = []
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null
		
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.unitList = res.data[1]
					
					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.unitId': {
				handler() {
		
					this.homeList = []
					this.queryWbu.homeId = null

					getBalconyUnitHome(this.queryWbu).then(res => {
						let homeList=[];
						for(let home of res.data[2]){
							homeList.push(home.homeId)
						}
						this.queryParams.homeIds=homeList
	
					})
				},
				deep: true,
				immediate: true
			},
		// 	'queryWbu.homeId': {
		// 		handler() {
		// 			this.queryparamss.balconyunithomeIds = null
		// 			this.queryparamss.communicateId = null
		// 			getBalconyUnitHome(this.queryWbu).then(res => {
		// 				if (res.data.length > 3) {
		// 					this.queryparamss.balconyunithomeIds = res.data[3]
		// 					this.form.balconyunithomeIds = res.data[3]
		// 				}
		// 				this.queryparamss.communicateId = this.queryWbu.communityId
		
		// 			})
		// 		},
		// 		deep: true,
		// 		immediate: true
		// 	}
		}
	}
</script>
<style>
	.qbqx {
		margin-top: 10px;
	}

	.baocun {
		margin-top: 20px;
		margin-left: 280px;
	}

	.qvxiao {
		margin-top: 20px;

	}

	.duihua {
		margin-left: -100px;
		width: 1700px;
	}

	.sousuo {
		margin-top: 20px;
		margin-left: 20px;
	}

	.duanxin {
		margin-top: 30px;
	}

	.neirong {
		
		width: 700px;
		
	}
</style>